<template>
    <view-box>
        <div class="positioninformati">
            <p class="" align="center" >
                <span onclick="history.go(-1)" style="position: relative;left: -2.9rem;">
                    <i slot="icon" class="iconfont icon-zuobian"></i>
                </span>
                <span>资讯</span>
            </p>
        </div>
        <div class="background-informati">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1574311747,1762160439&fm=27&gp=0.jpg" alt="">
            <s-Search style="margin-top: .1rem;position: absolute;"></s-Search>
        </div>

        <div class="">
            <tab active-color="#e5191a" custom-bar-width="0">
                <tab-item @on-item-click="informations">首页</tab-item>
                <tab-item selected @on-item-click="questionsinfors">问答</tab-item>
                <tab-item @on-item-click="attentions">关注</tab-item>
            </tab>

            <flexbox orient="vertical">
                <flexbox-item  v-for="(i, index) in 2" :key="index">
                    <div class="back-question">
                    <div class="flex-demo">
                        <div class="verti-questi">
                            <p class="p-img-ques">
                                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2537627520,3119182571&fm=27&gp=0.jpg" alt="">
                            </p>
                            <p class="p-img-ques1">
                                <span style="font-size:.291666rem;">默写生</span>
                                <span>
                                    <span style="color:#999999;">小智科技有限公司|项目经理</span>
                                </span>
                            </p>
                            <p class="p-img-ques2">
                                <button>关注</button>
                            </p>
                        </div>
                        <div class="consont-text-col">
                            <p class="consont-text-col-p1">是不是真的老了？没人要了？有多少70后有这种感
                                觉</p>
                            <p class="consont-text-col-p2">标准70后，国企出身，快消品行业做了多年，从终端业代爬
                                到销售总监，企业副总。前段时间因为欠薪辞职了。投了N
                                份简历都是石沉大海，面试几家公司都没有下落。不知道...</p>
                        </div>
                        <div class="answer-col">
                            <p style="margin-left: .20833rem">
                                <span style="color: #999999;">64回答</span>
                                <span style="color: #999999;">764阅读</span>
                            </p>
                            <p align="right" style="margin-right: .20833rem;">
                                <button><i slot="icon" class="iconfont icon-bianji"></i>写回答</button>
                            </p>
                        </div>
                    </div>
                    </div>
                </flexbox-item>
            </flexbox>

        </div>

    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Divider, Tab, TabItem, GroupTitle, Scroller } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    FlexboxItem,
    Divider,
    Tab,
    TabItem,
    GroupTitle,
    Scroller
  },
  data () {
    return {
      scrollTop: 0
    }
  },
  methods: {
    informations () {
      this.$router.push({ path: '/information' })
    },
    questionsinfors () {
      this.$router.push({ path: '/questionsinfors' })
    },
    attentions () {
      this.$router.push({ path: '/attentionps' })
    }
  }
}
</script>
<style scoped>
    .vux-flexbox .vux-flexbox-item:first-child {
        margin-left: 2.8%!important;
        margin-top: 0!important;
    }
    .background-informati{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 197px;
        margin-top: 79.992px;
        position: relative;
    }
    .background-informati img{
        width: 100%;
        height: 100%;
    }
    .positioninformati{
        width: 100%;
        height:79.992px;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    .positioninformati p{
        width: 100%;
        height:79.992px;
        line-height: 43.2px
    }
    .positioninformati span{
        font-size:27.49px;
        color: #000;
    }
    .back-question{
        background: #fff;
        width: 94.4%;
        margin-left: 2.8%;
    }
    .verti-questi{
        display: flex;
        width: 100%;

    }
    .p-img-ques{
        width: 20%;
    }
    .p-img-ques img{
        width: 90%;
        border-radius: 100%;
        margin-top: 14.99px;
        margin-left: 14.99px;
    }
    .p-img-ques1{
        width: 60%;
        line-height:36px;
        margin-left: 14.99px;
    }
    .p-img-ques1 span{
        width: 100%;
        display: inline-block;
        font-size:15px;

    }
    .p-img-ques2{
        width: 20%;
    }
    .p-img-ques2 button{
        width: 74.99px;
        height: 24.99px;
        border: #e5191a 1px solid;
        border-radius: 6.48px;
        color: #fff;
        background: #e5191a;
    }
    .consont-text-col{
        width: 100%;
    }
    .consont-text-col-p1{
        font-size:20.99px;
        margin-left: 14.99px;
        margin-right: 14.99px;

    }
    .consont-text-col-p2{
        font-size: 18px;
        color:#666666;
        margin-left: 14.99px;
        margin-right: 14.99px;
    }
    .answer-col{
        width: 100%;
        display: flex;
        font-size:14.99px;
        height: 45.9936px;
        line-height: 45.9936px;
    }
    .answer-col p{
        width: 50%;
    }
    .answer-col button{
        width:81.99px;
        height: 24.999px;
        background: #fef3f3;
        border: #fef3f3 1px solid;
        font-size:13.68px;
        color:#e5191a;
    }
</style>